@extends('admin.layout.base')
@section('styles')
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-list">
            <div class="panel-header">
                <div class="panel-title"> 帮助中心 </div>
                <el-tabs v-model="tabValue" type="card" @tab-click="search()">
                    <el-tab-pane label="全 部" name="0"></el-tab-pane>
                    <el-tab-pane label="正 常" name="1"></el-tab-pane>
                    <el-tab-pane label="锁定" name="2"></el-tab-pane>
                    <el-tab-pane label="新手指南" name="3"></el-tab-pane>
                    <el-tab-pane label="平台细则" name="4"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="panel-main">
                <div class="panel-btns">
                    <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                    <el-button type="primary" icon="fa fa-plus" @click="create()" size="small"> 新增</el-button>
                </div>
                <div class="panel-search">
                    <div class="panel-search-item">
                        <el-input  size="medium" v-model="params.kwd" clearable placeholder="请输入标题" class="input-with-select">
                            <el-button type="primary" @click="search()" slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </div>
                <el-table v-loading="loading"
                          element-loading-text="努力加载中..."
                          element-loading-spinner="el-icon-loading"
                          ref="multipleHandle"
                          tooltip-effect="dark"
                          :data="listData.data" border>
                    <el-table-column align="center" prop="id" label="编号" width="60"></el-table-column>
                    <el-table-column align="center" prop="title" label="标题" width="450"></el-table-column>
                    <el-table-column align="center" prop="type_text" label="类型" width="100">
                        <template slot-scope="scope"> <span v-html="scope.row.type_text"></span> </template>
                    </el-table-column>
                    <el-table-column align="center" prop="status_text" label="状态" width="75">
                        <template slot-scope="scope"> <span v-html="scope.row.status_text"></span> </template>
                    </el-table-column>
                    <el-table-column align="center" prop="created_at" label="创建日期" width="165"></el-table-column>
                    <el-table-column align="center" prop="updated_at" label="修改日期" width="165"></el-table-column>
                    <el-table-column label="操作" >
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row.id)" icon="fa fa-edit" type="primary" size="mini" plain> 编辑</el-button>
                            <el-button @click="destroy(scope.row.id)" icon="fa fa-trash" type="info" size="mini" plain> 删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination"  v-if="listData">
                    <div class="pagination-total">共 <em> @{{listData.length}} </em> 条记录</div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],//列表数据
                    tabValue: 0,//tab
                    params: {kwd: '', page: 1},
                    loading: false,
                }
            },
            created(){
                this.list();
            },
            methods: {
                //列表
                list(){
                    let that = this;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('admin.help.list') }}",this.params,function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.listData = res.data;
                                that.loading = false;
                            }
                        },'JSON');
                    },500);
                },
                //新增
                create(){
                    window.location.href = "{{ route('admin.help.edit') }}";
                },
                //编辑
                edit(id){
                    window.location.href = "{{ route('admin.help.edit') }}" + '?id=' + id;
                },
                //筛选
                search(){
                    this.params.page = 1;
                    switch (this.tabValue) {
                        case '1':
                            this.params.status = 1;
                            this.params.type = 0;
                            break;
                        case '2':
                            this.params.status = 2;
                            this.params.type = 0;
                            break;
                        case '3':
                            this.params.type = 1;
                            this.params.status = 0;
                            break;
                        case '4':
                            this.params.type = 2;
                            this.params.status = 0;
                            break;
                        default:
                            this.params.status = 0;
                            this.params.hot = 0;
                            this.params.good = 0;
                            break;
                    }
                    this.list();
                },
                //删除
                destroy(id){
                    let that = this;
                    this.$confirm('确定要删除该选中信息吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.post("{{ route('admin.help.destroy') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.list();
                            }
                        },'JSON');
                    }).catch(() => {});
                },
            }
        });
    </script>
@endsection
